<template>
	<view class="home">
		<view class="list uni-flex uni-column" style="">
			<view class="wrap-item" style="position: relative;">
				
				<view class="lis uni-flex uni-column" style="position: absolute;left: 0;width: 100%;" :style="{ top: -position + 'upx',height: height + 'upx' }">
					<view class="uni-flex uni-column" v-for="(item, index) in list" :key="index">
						<view class="swiper-item item_title uni-flex list_item" style="text-align: center;">
							<view style="flex: 0.1;padding-right: 50upx; overflow: hidden; color: #fff;">{{item.key}}</view>
							<view class="time uni-flex-item justify-align-center uni-flex" style="overflow: hidden;flex: 0.7; color: #fff;text-overflow:ellipsis;">{{ item.openid}}</view>
							<view class="phone uni-flex-item justify-align-center uni-flex" style="overflow: hidden;flex: 0.5; color: #fff;">{{ item.stages }}</view>
							<view class="prizes uni-flex-item justify-align-center uni-flex" style="overflow: hidden;flex: 1; color: #fff;">{{ item.money }}</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		list: {
			type: Array
		},
		// speed: {
		// 	type: Number
		// }
	},
	data() {
		return {
			scrollHeight: 0, //向上滚动距离
			height: 100, //.lis高度（滚动框高度）
			animationData: {} ,//动画对象
			position: -900, // 初始化距离顶部的位置
			speed: 10,
		};
	},
	mounted() {
		this.begin()
	},
	methods: {
		begin() {
			setTimeout(()=> {   // 延时器,防止获取不到list数组值
				this.height = this.list.length * 40
				if (this.list.length >= 100) {
					// #ifdef H5
						this.speed = 10
					// #endif
					// #ifndef H5
						this.speed = 0.4
					// #endif
				} else if (this.list.length >= 50) {
					// #ifdef H5
						this.speed = 5
					// #endif
					// #ifndef H5
						this.speed = 0.5
					// #endif
				} else {
					this.speed = 1
				}
				this.scroll()
			}, 600);
		},
		scroll() {
			let h = this.height // h 为 滚动元素需要滚动的距离
			let s = this.scrollHeight
			console.log(this.height)
			setInterval(() => {
				if( s < h ) { this.position = this.position + this.speed; s = this.position; }
				if( s >= h) { s = 0; this.position = -900; }
			},5)
		}
	}
};
</script>

<style>
	page{
		width: 100%;
	}
	.home,.list {
		width: 750upx;
		padding-bottom: 30upx;
	}
</style>
